<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;height:400px;border:solid 1px black;margin: 20px auto;}
        .msg{width:300px;height:300px;border-bottom:solid 1px black;overflow:auto}
        .msg div{max-width:200px;padding:6px;margin:6px;border-radius:6px;clear: both;}
        .msg div:nth-child(2n){background: #66f;float:left}
        .msg div:nth-child(2n-1){background: #6f6;float: right;}
    </style>
</head>
<body>
    <div class="box">
        <div class="msg"></div>
        <input type="text" id="txt">
        <input type="button" value="发送" id="send">
    </div>
</body>
<script>
    
    // 选择器
    var msg = document.querySelector(".msg");
    var txt = document.getElementById("txt");
    var send = document.getElementById("send");

    send.onclick = function(){
        sendMsg();
    }

    txt.onkeydown = function(eve){
        var e = eve || window.event;
        var code = e.keyCode || e.which;

        // 回车键发送
        // if(code === 13){
        //     sendMsg();
        // }

        // windows系统的ctrl+回车
        if(navigator.userAgent.indexOf("Windows") !== -1){
            if(code === 13 && e.ctrlKey){
                sendMsg();
            }
        }else
        // Mac系统的command+回车
        if(navigator.userAgent.indexOf("Mac") !== -1){
            if(code === 13 && e.metaKey){
                sendMsg();
            }
        }
    }

    function sendMsg(){
        // 如果输入框为空，直接结束
        if(txt.value !== ""){
            // 创建元素
            var div = document.createElement("div");
            // 插入到指定容器
            msg.appendChild(div);
            // 设置新创建元素内容
            div.innerHTML = txt.value;
            // 清空输入框，以备下次输入
            txt.value = "";
    
            // 当消息框出现滚动条时，保持滚动条一直在容器最底部
            msg.scrollTop = msg.scrollHeight;
        }
    }


</script>
</html>